<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Model模型数据
        let msg = "Hello MVVM";

        // ViewModel 视图模型
        window.onload = function(){
            let s1 = document.getElementById("s1");
            let inText = document.getElementById("inText");

            // Model --> View
            s1.innerHTML = msg;
            inText.value = msg;

            // View --> Model
            // 监听input元素
            // 当输入框数据发生改变之后触发事件
            inText.oninput = function(){
                // 当监听到输入框数据发生改变之后
                // 需要同步修改Model中的数据
                msg = this.value;
                // 当模型数据改变之后,视图数据也要随之改变
                s1.innerHTML = msg;
            }
        }

    </script>
</head>
<body>
    <div>
        <span id="s1"></span><br>
        <input type="text" id="inText">
    </div>
</body>
</html>